
 {% extends 'user/user.html' %} 
 {% load static %}
{% block title%}全部订单
{%endblock title %}
 {%block haed_files %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
<style>
		.pagination-outer{ text-align: center; }
		.pagination{
		    font-family: 'Oxygen', sans-serif;
		    display: inline-flex;
		    position: relative;
		}
		.pagination li a.page-link{
		    color: #e44251;
		    background-color: transparent;
		    font-size: 18px;
		    font-weight: 700;
		    letter-spacing: 1px;
		    text-transform: uppercase;
		    line-height: 30px;
		    height: 45px;
		    width: 45px;
		    margin: 0 15px 0 0;
		    border: 1px solid #e44251;
		    border-radius: 0;
		    position: relative;
		    z-index: 1;
		    transition: all 0.4s ease 0s;
		}
		.pagination li.active a.page-link,
		.pagination li a.page-link:hover,
		.pagination li.active a.page-link:hover{
		    color: #fff ;
		    background-color: #e44251;
		    border-color: #e44251;
		}
		.pagination li a.page-link:before,
		.pagination li a.page-link:after{
		    content: '';
		    background-color: #e44251;
		    height: 100%;
		    width: 100%;
		    border-radius: 50%;
		    transform: scale(0) rotateX(360deg);
		    position: absolute;
		    left:0 ;
		    top: 0;
		    z-index: -1;
		    transition: all 0.3s;
		}
		.pagination li a.page-link:after{
		    background-color: transparent;
		    border-radius: 0;
		    transform: scale(0.7);
		    transition-delay: 0.1s;
		}
		.pagination li a.page-link:hover:before{
		    border-radius: 0;
		    transform: scale(1) rotateX(0);
		}
		.pagination li a.page-link:hover:after{
		    background-color: #e44251;
		    opacity: 0;
		    transform: scale(1.5);
		}
		@media only screen and (max-width: 480px){
		    .pagination{
		        display: block;
		        border-radius: 20px;
		    }
		    .pagination li{
		        margin: 5px 2px;
		        display: inline-block;
		    }
		    .pagination li a.page-link{ margin: 0; }
		}
	</style>
{% endblock haed_files %} 
{%block contents %}
<div class="order_contents">
	{% csrf_token %}
	<div>{% block comment_title %}全部订单{% endblock comment_title %}</div>
    <ul>
		{% block comment_order %}
			{% for order in goods_page %}
				<li>
					<div class="info">
						<span>{{order.create_time}}</span>
						<span>订单号：{{order.order_id}}</span>
						<span>{{order.status_name}}</span>
					</div>
					<div class="goods">
						<ul>
							{% for goods in order.order_goods_list %}
								<li>
									<a href="{% url 'goods:detail' goods.sku.id %}"
										><img src="{{goods.sku.image.url}}" alt=""
									/></a>
									<a href="{% url 'goods:detail' goods.sku.id %}">{{goods.sku.name}}</a>
									<span>{{goods.price}}元/{{goods.sku.unite}}</span>
									<div class="num">{{goods.count}}</div>
									<div class="price">{{goods.amount}}元</div>
								</li>
							{% endfor %}
						</ul>
						<div class="total">{{order.total_price|add:order.transit_price}}元（含运费{{order.transit_price}}元）</div>
						<div class="status">{{order.status_name}}</div>
						<div class="function">
							<button type="button" data-order-id="{{order.order_id}}" data-status="{{order.order_status}}" class="btn btn-success">
								去付款
							</button>
						</div>
					</div>
				</li>
			{% endfor %}
		{% endblock comment_order %}
    </ul>
</div>
{% block comment_not_need_paginator %}
<div class="demo" style="margin-top:30px">
	<div class="container" style="width:auto">
		<div class="row pad-15">
			<div class="col-md-12">
				<nav class="pagination-outer" aria-label="Page navigation">
					<ul class="pagination">
						{% if goods_page.has_previous %}
							<li class="page-item">
								<a href="{% url 'user:user_order' goods_page.previous_page_number %}" class="page-link" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
						{% endif %}
						{% for page_index in pages %}
							{% if goods_page.number == page_index %}
								<li class="page-item active"><a class="page-link" href="{% url 'user:user_order' page_index %}">{{page_index}}</a></li>
							{% else %}
								<li class="page-item"><a class="page-link" href="{% url 'user:user_order' page_index %}">{{page_index}}</a></li>
							{% endif %}
						{% endfor %}
						{% if goods_page.has_next %}
							<li class="page-item">
								<a href="{% url 'user:user_order' goods_page.next_page_number %}" class="page-link" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						{% endif %}
					</ul>
				</nav>
			</div>
		</div>
	</div>
</div>
{% endblock comment_not_need_paginator %}
{% endblock contents %}
{% block bottom_file %}
<script>
    $(function () {
		//调整元素高度
		$(".goods").each(function (index,item) {
			let height = $(item).outerHeight();
			$(item).children('.total,.status,.function').outerHeight(height);
		})

		//根据状态码的不同 不同显示按钮上的字
		$('.btn-success').each(function(index,item){
			if($(item).attr('data-status') == 1){
				$(item).html('去支付')
			}
			else if($(item).attr('data-status') == 4){
				$(item).html('去评价')
			}
			else if($(item).attr('data-status') == 5){
				$(item).html('已完成')
			}

		})

		//点击付款按钮业务处理
		$('.btn-success').click(function () {

			order_id = $(this).attr('data-order-id')

			if($(this).attr('data-status')==1){
				//进行支付
				//拿到order_id
				csrf = $('input[name="csrfmiddlewaretoken"]').val()
				//发送ajax post请求 传递参数：order_id,csrftoken
				params = {'order_id':order_id,'csrfmiddlewaretoken':csrf}
				$.post('/order/pay',params,function (data){
					if(data.res==3){
						//成功就引导用户到支付页面
						window.open(data.pay_url)
						//让用户浏览器访问order/check网址查询支付结果
						//ajax post请求 参数为order_id
						$.post('/order/check',params,function(data){
							//根据后台传来的参数做相应的回应
							if(data.res===3){
								//支付成功
								alert(data.message)
								//重新加载页面
								location.reload()
							}
							else{
								alert(data.errmsg)
							}
						})
					}else{
						alert(data.errmsg)
					}
				})
			}
			else if ($(this).attr('data-status')==4) {
				//其他操作
				//跳到评论页面
				location.href = '/order/comment/' + order_id
			}
		})
    });
</script>
{% endblock bottom_file %}
